<template>
  <view class="version-item relative" :class="{active}" @click="click">
    <view class="text-center padding-top-60">
      <text class="text-40 text-bold" :class="['color-' + (active ? 'primary' : 'border')]">{{ item.name }}</text>
    </view>
    <view class="text-center margin-top-10">
      <text class="text-24" :class="['color-' + (active ? 'primary' : 'border')]">{{ item.description }}</text>
    </view>
    <view class="margin-top-40 padding-bottom-40 text-center">
      <text class="text-24 text-bold" :class="['color-' + (active ? 'primary' : 'border')]">￥</text>
      <text class="text-56 text-bold" :class="['color-' + (active ? 'primary' : 'border')]">{{ item.price }}</text>
      <text class="text-24 text-bold" :class="['color-' + (active ? 'primary' : 'border')]">/年</text>
    </view>
    <view v-if="item.freeMonth && item.vipSalesId" class="free flex-row flex-center">
      <text class="text-24 color-button text-bold">买1年赠{{ freeMonth }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VipItem',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    freeMonth() {
      if (!this.item.freeMonth) return '0月'
      if (this.item.freeMonth < 12) {
        return this.item.freeMonth + '月'
      } else {
        const y = parseInt(this.item.freeMonth / 12)
        const m = this.item.freeMonth % 12
        return y + '年' + (m ? m + '月' : '')
      }
    }
  },
  methods: {
    click() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(top,60);

.version-item{
  background: $color-secondary;
  border-radius: 20rpx;
  border: 4rpx solid $font-color-t3;
  overflow: hidden;
}

.active{
  background: rgba(218, 166, 101, 0.1);
  border-color:#ffdaac;
}

.free{
  padding:0 24rpx;
  height: 40rpx;
  background: #FFDAAC;
  border-radius:0 0 18rpx 0;
  @include position(absolute,0,$left:0);
}
</style>
